.overlay {
    opacity: 0;
    visibility: hidden;

    &.open {
        opacity: 1;
        visibility: visible;
    }
}

.dialog {
    max-width: 40rem;
    max-height: 100%;
    transform: scale(0.2);
    opacity: 0;

    &.open {
        transform: scale(1);
        opacity: 1;
        visibility: visible;
    }

    @media (--m) {
        position: fixed;
        bottom: var(--static-space-8);
        left: var(--static-space-8);
        right: var(--static-space-8);
        max-width: calc(100% - var(--static-space-16)) !important;
    }
}